// 反向继承
import { Button } from 'antd';
import React from 'react';

class Index extends React.Component {
  render() {
    return <div> hello,world </div>;
  }
}

function Index1() {
  return <div>函数组件 hoc</div>;
}

// 1. 操作state
// 2. 渲染劫持 super.render()

// 反向继承
function HOC(Component: any) {
  // 函数组件无法使用
  return class WrapComponent extends Component {
    /* 直接继承需要包装的组件 */
    constructor(props: any) {
      super(props);
      this.state = {
        number: 0,
      };
    }

    handleClick = () => {
      this.setState({
        number: 10,
      });
    };

    render() {
      const { number } = this.state;
      if (number === 0) {
        return <Button onClick={this.handleClick}>+</Button>;
      } else {
        return (
          <>
            <div>WrapComponent</div>
            <div>{super.render()}</div>
          </>
        );
      }
    }
  };
}

export const HOC1 = HOC(Index);

// const HOC2: typeof WrapComponent
export const HOC2 = HOC(Index1);

export default HOC1;
